@import "src/variables";
@import "~le5le-ui/variables";

.menus {
  height: 0.4rem;
  line-height: 0.4rem;
  background: #f8f8fa;
  border-bottom: 1px solid $color-border;
  display: flex;
  font-size: 0.13rem;

  .logo {
    a {
      font-size: 0.15rem;
      padding-left: 0;
      width: initial;

      img {
        margin-left: 0;
      }
    }
  }

  img {
    height: 0.22rem;
    margin: 0.1rem 0 0.1rem 0.1rem;
  }

  a {
    color: $color;
    padding: 0 0.1rem;
    font-size: 0.13rem;

    .iconfont {
      font-size: 0.16rem;
      line-height: 0.28rem;
      padding: 0;
    }

    .icon-angle-right {
      position: relative;
      left: 0.2rem;
    }

    &:hover {
      text-decoration: none;
    }
  }

  .disabled {
    a {
      cursor: default;
      background: transparent !important;
      color: $color-gray !important;
    }

    &:hover,
    .item:hover {
      background: transparent !important;
    }
  }

  .separator {
    border-left: 1px solid #e8e8e8;
    margin: 0 0.1rem;
  }

  .item {
    position: relative;

    & > .dropdown {
      padding: 0.08rem 0;

      .item {
        padding: 0 0.1rem;

        a {
          display: flex;
          justify-content: space-between;
          padding: 0 0.15rem;
          font-size: 0.13rem !important;
          min-width: 2rem;

          &:hover {
            .icon-delete {
              display: block !important;
            }
          }
        }

        &.line {
          background-color: transparent !important;
          padding: 0;
          margin: 0.05rem 0.1rem;
          border-top: 1px solid $color-gray;
        }

        .icon-delete {
          display: none;
          font-size: 0.14rem;
          color: #888;
          &:hover {
            color: $color-primary;
          }
        }
      }
    }

    &:hover {
      & > .dropdown {
        display: block;
        background: #fff !important;
      }
    }

    &.lines {
      a {
        i {
          font-size: 0.3rem !important;
        }
      }
      .dropdown {
        .item {
          a {
            min-width: 1.5rem;
            padding: 0.05rem 0;
            i {
              font-size: 0.4rem !important;
            }
          }
        }
      }
    }
  }

  .full {
    flex-grow: 1;
    width: inherit !important;
  }

  &.white {
    color: $color !important;

    a {
      color: $color !important;
      &:hover {
        color: $color-primary !important;
      }
    }
  }
}

figure {
  padding: 0 0.25rem;
  width: 7rem;

  .topo {
    position: relative;
    margin: 0.1rem 0.1rem 0 0;
    border: 1px solid $color-border !important;
    cursor: pointer;
    min-width: 1.2rem !important;
    width: 1.2rem !important;
    height: 1.2rem !important;
    padding: 0.1rem !important;

    &:nth-child(5n + 0) {
      margin-right: 0;
    }

    &:hover {
      border-color: $color-primary !important;
    }

    img {
      margin: 0 !important;
      width: 1rem !important;
      height: 1rem !important;
      pointer-events: none;
    }

    .icon-delete {
      position: absolute;
      top: 0.05rem;
      right: 0.1rem;
    }
  }
}

.clicked {
  .dropdown {
    display: none !important;
  }
}

.nav-tab {
  .item {
    margin-left: 0.05rem;
    background-color: transparent !important;
    color: $color !important;
    cursor: pointer;

    &.active {
      color: #222 !important;
    }

    &:hover {
      color: $color-primary !important;
    }
  }
}

.header-small {
  margin-right: 0.055rem;
}
